import React from 'react';
import ReactDOM from 'react-dom';
import mirror, {actions, connect} from 'mirrorx';
import { List, InputItem, WhiteSpace, WingBlank, Button,Picker,Flex,Modal,Checkbox} from 'antd-mobile';
import { createForm } from 'rc-form';

const ListItem = List.Item;
const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;

import { FormattedMessage} from 'react-intl';


class App extends React.Component { 
	constructor(props) {
		super(props);
		this.state={
			errorMap:{},            
		};

		const Lang = window.LangMessage ||{};

		this.keyCodes=[
            {
			keycode:"cardType",
			text:Lang.bank_card_type || "持卡类型",
		 	editable:false,
            value:'中国农业银行'			
		   },
            {
			keycode:"mobile",
			text:Lang.phone_no ||"手机号码",
		 	editable:false			
		   },
            {
			keycode:"holder",
			text:Lang.name ||"姓名",
		 	editable:false			
		   },
           {
			keycode:"safeCode",
			text:Lang.safe_code ||"安全码",
		 	editable:false			
		   }
        ];	
		this.dateList = [];	
	}

	componentDidMount(){
		this.setState({   
			holder:"邹蕾"
		});
		let tempObj = {};
		let tempArr1 = [];
		let tempArr2 = [];		
		for(var i = 1; i <= 12; i++){
			if (i < 10){
				i = '0'+i
			}
			tempObj = {
				label: i,
				value: i,
			}
			tempArr1.push(tempObj)
		}
		this.dateList.push(tempArr1)
		for(var i = 0; i <= 99; i++){
			if (i < 10){
				i = '0'+i
			}
			tempObj = {
				label: i,
				value: i,
			}
			tempArr2.push(tempObj)
		}
		this.dateList.push(tempArr2)
		console.log(this.dateList)
    }

	onErrorClick=(keyCode)=>{	//点击报错icon出现的提示	
		const {getFieldError } = this.props.form;
		let msg = getFieldError(keyCode);
		if(msg){			
			T.showError(msg.join(","));
		}	
	}
	
	submit=()=>{
		this.props.form.validateFields((error, values) => {
			
			var errorMap ={}
			if(error){
				for(var key in error){
					errorMap[key] = 1;
				}
			}else{	
				T.showSuccess("没有错误");			
						
			}

			this.setState({
				errorMap
			});		
			console.log(error, values);
		});
	}

	

	
	render() {
		const { getFieldProps } = this.props.form;
		const cardNo = this.cardNo;
		const holder = this.holder;		
		
		return (<div className="bankcard-manage">
			  <WhiteSpace/>
			  <WhiteSpace/>
				<List>
					{this.keyCodes.map((item,index)=>
					<InputItem  key={index}
					{...getFieldProps(item.keycode,{
						rules: [{							
							message:item.message || (item.tip),
							pattern:item.pattern,
							name:item.name
						}]
					})}
					type={item.type}
					name={item.name}
					extra={item.extra}
					error ={this.state.errorMap[item.keycode]}
					onErrorClick={this.onErrorClick.bind(this,item.keycode)}
					clear
					placeholder={item.tip}
					labelNumber={7}
                    editable={item.editable}
                    value = {item.value}
					>{item.text}</InputItem>			
					)}			
		        </List>
				<List>
				<Picker data={this.dateList} cols={1} cascade={false} value={this.state.dueDate} onChange={(value)=>this.setState({dueDate:value})}>
					<ListItem arrow="horizontal"><FormattedMessage id='valid_period' defaultMessage='有效期'/></ListItem>
				</Picker>
				</List>
				<Flex>
					<Flex.Item>
					<AgreeItem data-seed="logId" onChange={e => console.log('checkbox', e)}>
					<FormattedMessage id='agree' defaultMessage='同意'/><a onClick={(e) => { e.preventDefault(); alert('agree it'); }}><FormattedMessage id='user_service_protcol' defaultMessage='用户服务协议'/></a>
					</AgreeItem>
					</Flex.Item>
     		    </Flex>
				 <WhiteSpace/>
				 <WhiteSpace/>
				 <WingBlank>
				<Button className="diy_background" type="primary" onClick={this.submit}><FormattedMessage id='verify_info' defaultMessage='验证信息'/></Button>
				</WingBlank>
	  	</div>)
	}
}

const AppForm = createForm()(App);

export default AppForm;